<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <!-- 商品名称搜索 -->
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.storeName"
          clearable
          size="small"
          placeholder="请输入名称"
        ></el-input>
      </el-col>
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.storePhone"
          clearable
          size="small"
          placeholder="请输入电话"
        ></el-input>
      </el-col>
      <!-- 商品分类搜索 -->
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-select
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.storeStatus"
          size="small"
          clearable
          placeholder="请选择状态"
        >
          <el-option
            v-for="item in options.status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-select
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.storeType"
          size="small"
          clearable
          placeholder="请选择门店"
        >
          <el-option
            v-for="item in options.type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="initData"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <!-- 检索结果 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24">
        <el-table
          :data="tableData.records"
          border
          size="small"
          style="width: 100%"
        >
          <el-table-column type="index" label="序" width="50">
          </el-table-column>
          <el-table-column prop="storeName" label="门店名称" width="80">
          </el-table-column>
          <el-table-column prop="storePhone" label="门店电话" width="100">
          </el-table-column>
          <el-table-column prop="busineHours" label="营业时间" width="140">
          </el-table-column>
          <el-table-column
            prop="supportOrder"
            label="是否支持预约"
            :formatter="reserveFormat"
            width="100"
          >
          </el-table-column>

          <el-table-column
            prop="storeType"
            label="类型"
            :formatter="levelFormat"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="storeStatus"
            label="状态"
            :formatter="stateFormat"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="storeLng" label="经度" width="140">
          </el-table-column>
          <el-table-column prop="storeLat" label="维度" width="140">
          </el-table-column>

          <el-table-column prop="storeDescription" label="门店描述" width="140" :show-overflow-tooltip=true>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <!-- <el-button size="mini" @click="infoList_detial(scope.row.id)"
                >查看</el-button
              > -->
              <el-button
                size="mini"
                type="warning"
                @click="to(`/room/update/${scope.row.id}`)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="selectUser = scope.row"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- delect -->
    <el-dialog title="提示" :visible.sync="selectUser" width="30%">
      <span
        >确定删除{{ selectUser ? `’${selectUser.storeName}‘` : "" }}吗?</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectUser = null">取 消</el-button>
        <el-button
          type="primary"
          @click="deleteUser(selectUser ? selectUser.id : null)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      queryInfo: {
        storeName: "",
        storePhone: "",
        storeType: "",
        storeStatus: "",
        page: 1,
        pageSize: 5,
      },
      selectUser: null,
      options: {
        status: [
          {
            label: "未打烊",
            value: 0,
          },
          {
            label: "打烊",
            value: 1,
          },
        ],
        type: [
          {
            label: "艾灸院",
            value: 1,
          },
          {
            label: "普通门店",
            value: 2,
          },
        ],
      },
      tableData: [],
    };
  },
  async created() {
    this.initData();
  },
  methods: {
    async initData() {
      let query = {
        ...this.queryInfo,
      };
      if (query.storeName == "") delete query.storeName;
      if (query.storePhone == "") delete query.storePhone;
      if (query.storeType == "") delete query.storeType;
      if (query.storeStatus == "") delete query.storeStatus;
      delete query.page;
      delete query.pageSize;
      let list = await this.http.post("/store/queryPage", {
        pageSize: this.queryInfo.pageSize,
        pageNo: this.queryInfo.page,
        query: query,
      });
      this.tableData = list.result;
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      this.initData();
    },
    handleCurrentChange(currentPage) {
      this.queryInfo.page = currentPage;
      this.initData();
    },
    to(url) {
      this.$router.push({ path: url });
    },
    async deleteUser(id) {
      if (!id) {
        this.eui.Message({ message: "请选择用户" });
        return false;
      }
      let type, msg;
      let res = await this.http.delete("/store/deleteStore?id=" + id);
      if (!res.error) (type = "success"), (msg = "删除成功");
      else (type = "error"), (msg = "删除失败");
      this.eui.Message({
        message: msg,
        type: type,
      });
      this.selectUser = null;
      this.initData();
    },
    stateFormat(row, column) {
      if (row.storeStatus === 0) return "未打烊";
      else return "打烊";
    },
    levelFormat(row, column) {
      if (row.storeType === 0) return "总店";
      else if (row.storeType === 1) return "艾灸院";
      else return "普通门店";
    },
    reserveFormat(row, column) {
      if (!row.supportOrder) return "不支持";
      else return "支持";
    },
  },
};
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}
.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}
/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
</style>